<template>
    <div class="allcoresource">
        <div class="allcor-cont" v-for="item in data" :key="item.id">
            <div class="cont-top">
                <el-checkbox :label="item.name" size="large" />
            </div>
            <div class="cont-bot">
                <el-checkbox v-for="item in dataRole" label="Option 1" size="large" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import * as api from '../../request/api'
import { reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
let Roleid: any = useRoute().query
console.log(Roleid);

const chiren: any = reactive([])
const data: any = reactive([
    {
        categoryId: 1,
        name: '商品模块',
        id: '0',
        children: []
    },
    {
        categoryId: 2,
        name: '订单模块',
        id: '0',
        children: []
    },
    {
        categoryId: 3,
        name: '营销模块',
        id: '0',
        children: []
    },
    {
        categoryId: 4,
        name: '权限模块',
        id: '0',
        children: []
    },
    {
        categoryId: 5,
        name: '内容模块',
        id: '0',
        children: []
    },
    {
        categoryId: 6,
        name: '其他模块',
        id: '0',
        children: []
    }
])

const dataRole: any = reactive([])

const allMenuS = async () => {
    const res = await api.admin.getresources()
    Array(res).forEach(item => {
        console.log(item);

        chiren.value = item
    })
    // dataRole.value = res
    console.log(chiren);
    return res
}
allMenuS()
// const adchiredn = () => {
//     data.forEach(items => {
//         // chiren.forEach(item => {
//         //     if (item.categoryId == items.categoryId) {
//         //         items.children.push(item)
//         //     }
//         // })
//         console.log(items);

//     })
//     console.log(data);

// }
// adchiredn()

const allrole = async () => {
    const res = await api.admin.getresourcesRole(Roleid.id)
    console.log(res)
    return res
}
allrole()
</script>
                                                                                                                                                                                                                                                                                                                                                                                             
<style lang="scss" scoped>
.allcoresource {
    width: 100%;
    height: 100vh;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    padding: 10px;

    .allcor-cont {
        width: 100%;

        .cont-top {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #f2f6fc;
            margin: 10px;
        }

        .cont-bot {
            display: flex;
            align-items: center;
            padding: 10px;
            margin: 10px;
            flex-wrap: wrap;

            .el-checkbox {
                width: 30%;
            }

        }
    }

}
</style>